<template>
  <a-form :form="form">
    <a-row>
      <a-col :span="12">
        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="i18n('form.moreURLs','更多URL')">
          <a-input style="width: 80%" :placeholder="i18n('form.moreURLs','更多URL')" v-model="dataUrl"/>
        </a-form-item>
      </a-col>
      <a-col :span="12">
        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="i18n('form.type','类型')">
          <a-radio-group v-model="funcType" @change="sqlTypeChange">
            <a-radio value="func">{{i18n('form.func','调用方法（groovy语法）')}}</a-radio>
            <a-radio value="sql">{{i18n('form.sql','调用自定义查询')}}</a-radio>
            <a-radio value="interface">{{i18n('form.interface','调用第三方接口')}}</a-radio>
          </a-radio-group>
        </a-form-item>
      </a-col>
    </a-row>
    <a-row>
      <a-col :span="12" v-show="funcType=='func'">
        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="i18n('form.funcValue','获取数据方法')">
          <a-input style="width: 80%" :placeholder="i18n('form.funcValue','获取数据方法')" v-model="funcValue"/>
          <span v-show="functionTrue" style="color: red">{{i18n('msa.funcValueTips','请填写获取数据方法！')}}</span>
        </a-form-item>
      </a-col>
      <a-col :span="12" v-show="funcType=='sql'">
        <a-form-item :labelCol="labelCol" :wrapper-col="wrapperCol" :label="i18n('form.sqlName','自定义查询')">
          <a-input-group compact>
            <a-input v-model="sqlName" :placeholder="i18n('form.sqlName','自定义查询')" style="width: 70%"/>
            <a-button @click="openDataSource" >·&nbsp;·&nbsp;·</a-button>
            <span v-show="functionTrue" style="color: red">{{i18n('msa.sqlNameTips','请选择自定义SQL名称！')}}</span>
          </a-input-group>
        </a-form-item>
      </a-col>
        <a-col :span="12" v-show="funcType=='interface'">
            <a-form-item :labelCol="labelCol" :wrapper-col="wrapperCol" :label="i18n('form.interfaceName','第三方接口')">
                <a-input-group compact>
                    <a-input v-model="interfaceId" style="display:none;" />
                    <a-input v-model="interfaceName" :placeholder="i18n('form.interfaceName','第三方接口')" style="width: 70%"/>
                    <a-button @click="openInterface" >·&nbsp;·&nbsp;·</a-button>
                    <span v-show="functionTrue" style="color: red">{{i18n('msa.selApiTips','请选择第三方接口名称！')}}</span>
                </a-input-group>
            </a-form-item>
        </a-col>
    </a-row>
  </a-form>
</template>

<script>
  import {BaseForm, RxDialog,Dialog} from "@lowcode/jpaas-common-lib";
  import rxAjax from '@/assets/js/ajax.js';

  export default {
    name: "InsColumnDefList",
    mixins: [BaseForm],
    props: {
      dataObj: {
        type: Object,
        default: null
      }
    },
    created() {

    },
    mounted(){
      this.dataUrl = this.dataObj.dataUrl;
      this.funcValue = this.dataObj.function;
      this.funcType = this.dataObj.funcType || "func";
      this.setIsSqlType(false);
    },
    data() {
      return {
        dataUrl: "",
        funcValue: "",
        functionTrue: false,
        funcType:"",
        sqlName:"",
        interfaceId:"",
        interfaceName:"",
        labelCol:{
          span:6
        },
        wrapperCol:{
          span:18
        }
      }
    },
    methods: {
      i18n(name,text,key){
          return this.$ti18(name,text,"insColumnDef",key);
      },
      sqlTypeChange(e){
        var val = e.target.value;
        this.funcValue = "";
        this.functionTrue=false;
        this.funcType=val;
        this.setIsSqlType(true);
        this.dataObj.funcType = val;
        this.dataObj.function = "";
        this.$emit("change", this.dataObj);
      },
      openDataSource(){
        Dialog.openCustomDataDialog({
          curVm: this, widthHeight: ['1200px', '600px']
        }, function (self, data) {
          if(data){
            self.sqlName=data.name;
            self.funcValue=data.key;
            self.dataObj.sqlName = data.name;
            self.dataObj.function = data.key;
            self.$emit("change", self.dataObj);
          }
        })
      },
      openInterface(){
          let self_ = this;
          Dialog.openSysInterfaceDialog({
              curVm: this,max:true,
          }, function (self, data) {
              var fieldStr = data.apiReturnFields;
              if (!fieldStr || fieldStr=='[]') {
                  self.$message.error(self_.i18n('msa.apiValueTips','请选择'));
                  return;
              }
              var fields = JSON.parse(fieldStr);
              if(fields[0].paramType!='array'){
                  self.$message.error(self_.i18n('msa.apiArrayTips','请选择'));
                  return;
              }
              if(fields[0].children[0].paramType!='object' || !fields[0].children[0].children || fields[0].children[0].children.length==0) {
                  self.$message.error(self_.i18n('msa.apiJsonTips','请选择'));
                  return;
              }
              self.interfaceId=data.apiKey;
              self.interfaceName=data.apiName;
              self.funcValue=data.apiKey;
              self.dataObj.interfaceId=data.apiKey;
              self.dataObj.interfaceName = data.apiName;
              self.dataObj.function = data.apiKey;
              self.$emit("change", self.dataObj);
          })
      },
      valid() {
        if (!this.funcValue) {
          this.functionTrue = true;
          return false;
        }
        return true;
      },
      setIsSqlType(flag){
        if("sql"==this.funcType){
            if(!flag) {
                this.sqlName = this.dataObj.sqlName;
            }
        }else if("interface"==this.funcType){
            if(!flag) {
                this.interfaceId = this.dataObj.interfaceId;
                this.interfaceName = this.dataObj.interfaceName;
            }
        }else {
          this.sqlName ="";
          this.interfaceId="";
          this.interfaceName="";
        }
      }
    },
    watch: {
      dataUrl: function (val) {
        this.dataObj.dataUrl = val;
        this.$emit("change", this.dataObj);
      },
      funcValue: function (val) {
        if (!this.funcValue) {
          this.functionTrue = true;
        } else {
          this.functionTrue = false;
        }
        this.dataObj.function = val;
        this.$emit("change", this.dataObj);
      }
    },

  }
</script>

<style scoped>

</style>